<template>
  <div id="current-doc">
    <div @contextmenu.prevent='handleRightClick' id="markText">
      <!-- <div id="markText"> -->
      <div class="txt-content" v-html="txt"></div>
    </div>
    <el-button type="primary" plain @click="handleExtractDoc">智能识别文档</el-button>
    <text-markup ref="textMarkUp" :rowkey="rowkey" :objectUri="objectUri"></text-markup>
    <!-- <div class="extraction-container">
      <div class="extraction-item" v-for="extraction in extractionList" :key="extraction.id">
        <el-switch v-model="extraction.isAllowed" active-text="使用" inactive-text="禁用" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        <div class="entity-header">
          <span class="entity-name">{{extraction.displayName}}<span><span class="tips">({{extraction.displayType}})</span></span></span>
          <el-popover placement="bottom" trigger="manual" v-model="extraction.popoverVisible">
            <el-tree class="custom-node-tree" :data="groupTree" :default-expand-all="true" @node-click="hanlpTreeClick($event,extraction)" :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{node,data}">
                <img :src="data.icon" alt="" style="width:16px;height:16px;">
                <span>{{ node.label }}</span>
              </span>
            </el-tree>
             <el-input slot="reference" class="pointer" placeholder="选择对象类型" suffix-icon="el-icon-arrow-down" readonly v-model="extraction.objectName" @click.native="extraction.popoverVisible = !extraction.popoverVisible" style="width:40%"></el-input> -->
    <!-- <el-button slot="reference" @click="extraction.popoverVisible = !extraction.popoverVisible">{{extraction.objectName}}</el-button> -->
    <!-- </el-popover>
        </div>
        <div class="property-container">
          <el-button type="primary" size="small" class="addProperty-btn" @click="appendProperty(extraction)">添加属性</el-button>
          <div class="property-box" v-for="(property,index) in extraction.propertyList" :key="property.id">
            <el-input v-model="property.value" placeholder="属性值" class="input-with-select" style="width:80%">
              <el-select v-model="property.propertyUri" placeholder="属性类型" @change='propertyChange' slot="prepend">
                <el-option v-for="item in propertyList" :key="item.value" :label="item.displayname" :value="item.propertyUri">
                </el-option>
              </el-select>
            </el-input>
            <i class="el-icon-circle-close" @click="delProperty(index,extraction)"></i>
          </div>
        </div>
      </div>
    </div> -->
    <el-dialog class="markTextDialog" title="标注文本" :visible.sync="dialogVisible">

      <el-form label-width="80px">
        <el-form-item label-width="0px" class="search-box">
          <el-input v-model="keyword" placeholder="请输入关键字">
            <el-button slot="append" icon="el-icon-search" @click.stop="handleSearh(1)"></el-button>
          </el-input>
          <el-alert v-show="input_error" title="您还没有填写关键词" type="error" @close="handlerClearError"> </el-alert>
          <div v-show="isSearchResult_show" class="search-result-container">
            <ul>
              <li v-for="(account,index) in accountList" :key="index" class="search-result-box" @click.stop="handleChooseAccount(account)">
                <div class="search-result-item">
                  <img class="search-result-img" :src="account.iconUrl" alt="">
                </div>
                <div class="search-result-content">
                  <span class="displayName">{{account.showName?account.showName:account.displayName}}</span>
                  <span>{{account.name}}</span>
                </div>
              </li>
              <el-pagination v-if="accountList.length>0" class="page-container" background layout="prev, next,total" :current-page="page" :page-size="page_size" @current-change="handlerChangePage">
              </el-pagination>
            </ul>
          </div>
        </el-form-item>
        <fieldset class="object-container">
          <legend>对象</legend>
          <el-row>
            <el-col :span="12">
              <el-form-item label="标签">
                <el-select style="width: 60%;" v-model="markTextModel.rowkey" placeholder="请选择标签" @change="handleChangeObjectName" :disabled="is_objectName_disable">
                  <el-option-group v-for="group in displayNameGroup" :key="group.label" :label="group.label">
                    <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型">
                <el-popover placement="bottom" trigger="manual" v-model="popoverVisible">
                  <el-tree class="custom-node-tree" :data="groupTree" :default-expand-all="true" @node-click="handleNodeClick" :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{node,data}">
                      <img :src="data.icon" alt="" style="width:16px;height:16px;">
                      <span>{{ node.label }}</span>
                    </span>
                  </el-tree>
                  <el-input v-if="propertyDisabled" slot="reference" readonly v-model="markTextModel.objectName" style="width:60%"></el-input>
                  <el-input v-else slot="reference" class="pointer" placeholder="选择对象类型" suffix-icon="el-icon-arrow-down" readonly v-model="markTextModel.objectName" @click.native="popoverVisible = !popoverVisible" style="width:60%"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>
        <fieldset class="property-container">
          <legend>属性</legend>
          <template v-if="!isAddLabel">
            <el-row>
              <el-col :span="12">
                <el-form-item label="类型">
                  <el-select v-model="current_Attr" placeholder="请选择" @change='propertyChange' value-key="displayname" style="width: 60%;">
                    <el-option v-for="(item,index) in propertyList" :key="index" :label="item.displayname" :value="item">
                    </el-option>
                    <div>
                      <el-button type="primary" class="addProperty" @click="addProperty">
                        添加属性</el-button>
                    </div>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="值">
                  <template v-if="current_Attr.propertyType==='TimeInterval'">
                    <el-date-picker type="datetime" v-model="current_Attr.value.startTime" value-format="yyyy-MM-dd HH:mm:ss" style="width:48%" placeholder="开始日期">
                    </el-date-picker>
                    <el-date-picker type="datetime" v-model="current_Attr.value.endTime" value-format="yyyy-MM-dd HH:mm:ss" style="width:48%" placeholder="结束日期">
                    </el-date-picker>
                  </template>
                  <template v-else-if="current_Attr.propertyType==='GisData'">
                    <el-input v-model="current_Attr.value.longitude" placeholder="经度" style="width:30%"></el-input>
                    <el-input v-model="current_Attr.value.latitude" placeholder="纬度" style="width:30%"></el-input>
                    <el-input v-model="current_Attr.value.address" placeholder="位置描述" style="width:30%"></el-input>
                  </template>
                  <template v-else-if="current_Attr.propertyType==='DateTime'">
                    <el-date-picker type="datetime" v-model="current_Attr.value" value-format="yyyy-MM-dd HH:mm:ss" style="width:60%" :placeholder="current_Attr.displayname">
                    </el-date-picker>
                  </template>
                  <template v-else>
                    <el-input v-if="current_Attr===''" :value="markedText" style="width:60%"></el-input>
                    <el-input v-else v-model="current_Attr.value" :placeholder="current_Attr.displayname" style="width:60%"></el-input>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-else v-for="(representative,index) in representativePropertyList">
            <el-row :key="index">
              <el-col :span="12">
                <el-form-item label="类型" required>
                  <el-input v-model="representative.displayname" readonly style="width: 60%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="值" required>
                  <template v-if="representative.propertyType==='TimeInterval'">
                    <el-date-picker type="datetime" v-model="representative.value.startTime" value-format="yyyy-MM-dd HH:mm:ss" style="width:48%" placeholder="开始日期">
                    </el-date-picker>
                    <el-date-picker type="datetime" v-model="representative.value.endTime" value-format="yyyy-MM-dd HH:mm:ss" style="width:48%" placeholder="结束日期">
                    </el-date-picker>
                  </template>
                  <template v-else-if="representative.propertyType==='GisData'">
                    <el-input v-model="representative.value.longitude" placeholder="经度" style="width:30%"></el-input>
                    <el-input v-model="representative.value.latitude" placeholder="纬度" style="width:30%"></el-input>
                    <el-input v-model="representative.value.address" placeholder="位置描述" style="width:30%"></el-input>
                  </template>
                  <template v-else-if="representative.propertyType==='DateTime'">
                    <el-date-picker type="datetime" v-model="representative.value" value-format="yyyy-MM-dd HH:mm:ss" style="width:60%" :placeholder="representative.displayname">
                    </el-date-picker>
                  </template>
                  <template v-else>
                    <el-input v-model="representative.value" :placeholder="representative.displayname" style="width:60%"></el-input>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-if="propertyList.length===0 && representativePropertyList.length===0">
            <el-col :span="12" :offset="12">
              <el-form-item label="值" required>
                <el-input :value="markedText" style="width:60%"></el-input>
              </el-form-item>
            </el-col>
          </template>
        </fieldset>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseMarkTagDialog">取 消</el-button>
        <el-button type="primary" @click="handleMarkText">确 定</el-button>
      </span>
    </el-dialog>
    <!--新增属性对话框-->
    <el-dialog :visible.sync="propertyAddVisible" title="新增属性" :append-to-body='true' style="width:80%">
      <property-editor @closeDialog="closeAddPropertyDialog" :objectUri="markTextModel.objectUri">
      </property-editor>
    </el-dialog>
  </div>
</template>
<script>
import util from '@/utils'
import { getUserName } from '@/utils/auth'
// 引入接口api
import {
  getTxtByUri,
  getListDocumentTag,
  postMarkTag,
  findAllWithBizGroupAsMap,
  getAssociationAttr,
  saveProperty,
  updateProperty,
  findOperateProperties,
  searchFullTextList
} from '@/api/archives'
// 异步引入组件
const TextMarkup = () => import('./text-markup.vue')
// 属性添加组件
const PropertyEditor = () =>
  import('@/views/archives/analysis/components/propertyEditor.vue')
export default {
  data() {
    return {
      userName: '',
      txt: '',
      cacheTxt: '',
      // 标注的文本
      markedText: '',
      dialogVisible: false,
      popoverVisible: false,
      propertyDisabled: false,
      // 标注文本model
      markTextModel: {
        rowkey: '',
        objectUri: '',
        objectName: '',
        docObjUri: '',
        docRowKey: ''
      },
      displayNameGroup: [
        {
          label: '最近标注对象',
          options: [
            {
              value: '',
              label: ''
            }
          ]
        },
        {
          label: '创建标注对象',
          options: []
        }
      ],
      // 对象分组树
      groupTree: [],
      // 已拥有的属性
      alreadyOwnedPropertyList: [],
      // 非代表属性
      propertyList: [],
      // 代表属性列表
      representativePropertyList: [],
      // 最近标注对象列表
      listDocumentTagList: [],
      // 下拉框选择的属性
      current_Attr: '',
      // 对象标签下拉框是否禁用
      is_objectName_disable: false,
      // 属性添加对话框是否显示标识符
      propertyAddVisible: false,
      // 搜索关键字
      keyword: '',
      // 账户列表
      accountList: [],
      page: 1,
      // 每页条数
      page_size: 10,
      // 当前选中的账户
      current_selectd_account: '',
      // 是否显示搜索结果
      isSearchResult_show: false,
      // 输入框错误输入提示标识符
      input_error: false
    }
  },
  props: {
    rowkey: String,
    objectUri: String
  },
  created() {
    this.userName = decodeURIComponent(getUserName())
    this.loadTree()
    this.getText()
  },
  watch: {
    keyword: function(val, newVal) {
      this.input_error = false
    }
  },
  components: {
    TextMarkup,
    PropertyEditor
  },
  computed: {
    // 是否新增标注
    isAddLabel: function() {
      if (this.markTextModel.rowkey === '') {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    document.ondragstart = event => {
      if (window.getSelection) {
        this.markedText = window.getSelection().toString()
      } else if (document.selection && document.selection.type != 'Control') {
        this.markedText = document.selection.createRange().text
      }
    }
    document.ondragenter = e => {
      e.preventDefault()
      let target = e.target
      let rowkeyObj = target.attributes['data-rowkey']
      let objectUriObj = target.attributes['data-objecturi']
      let nameObj = target.attributes['data-name']
      if (rowkeyObj && this.markedText) {
        this.is_objectName_disable = true
        this.propertyDisabled = true
        this.dialogVisible = true
        this.markTextModel.objectName = nameObj.value
        this.markTextModel.rowkey = rowkeyObj.value
        this.markTextModel.objectUri = objectUriObj.value
        this.getPropertyList(objectUriObj.value)
        this.getOwnedPropertyList(rowkeyObj.value, objectUriObj.value)
      }
    }
  },
  methods: {
    // 获取本文标注
    async getText() {
      let params = {
        objectUri: this.objectUri,
        rowkey: this.rowkey
      }
      this.txt = await getTxtByUri(params)
      this.cacheTxt = this.txt
      this.getListDocumentTag(this.rowkey, this.objectUri)
    },
    // 搜索
    async handleSearh(page) {
      if (this.keyword === '') {
        this.input_error = true
        return
      }
      let param = {
        keywords: [this.keyword],
        // objectList: objectList,
        objectType: 'socialaccount,keyfigures,focusgroup',
        curpage: page,
        persize: this.page_size
      }
      this.accountList = await searchFullTextList(param)
      this.current_selectd_account = ''
      if (this.accountList.length === 0) {
        this.isSearchResult_show = false
      } else {
        this.isSearchResult_show = true
      }
    },
    // 清除输入框输入错误提示
    handlerClearError() {
      this.input_error = false
    },
    // 选择查询的账户
    handleChooseAccount(account) {
      this.current_selectd_account = account
      this.is_objectName_disable = true
      this.propertyDisabled = true
      let showName = account.showName ? account.showName : account.dispalyName
      this.displayNameGroup[1]['options'].push({
        label: showName,
        value: account.rowkey
      })
      this.markTextModel.objectName = account.name
      this.markTextModel.rowkey = account.rowkey
      this.markTextModel.objectUri = account.objectUri
      this.getPropertyList(account.objectUri)
      this.getOwnedPropertyList(account.rowkey, account.objectUri)
      this.isSearchResult_show = false
    },
    // 当前页改变时会触发
    handlerChangePage(val) {
      this.handleSearh(val)
      this.page = val
    },
    // 添加属性
    addProperty() {
      this.propertyAddVisible = true
    },
    // 关闭新增属性对话框
    closeAddPropertyDialog() {
      this.propertyAddVisible = false
      this.getPropertyList(this.markTextModel.objectUri)
    },
    // 右击
    handleRightClick(e) {
      if (window.getSelection) {
        this.markedText = window.getSelection().toString()
      } else if (document.selection && document.selection.type != 'Control') {
        this.markedText = document.selection.createRange().text
      }
      if (this.markedText != '') {
        let displayObj = {
          label: this.markedText,
          value: ''
        }
        this.displayNameGroup[1]['options'] = []
        this.displayNameGroup[1]['options'].push(displayObj)
        this.dialogVisible = true
      }
    },
    // 对象名称下拉选择触发事件
    handleChangeObjectName(data) {
      let relations = this.listDocumentTagList.relations
      let selectedObj = relations.filter(item => item.rowkey === data)[0]
      if (!this.isAddLabel) {
        this.propertyDisabled = true
        this.markTextModel.objectName = selectedObj.name
        this.markTextModel.rowkey = selectedObj.rowkey
        this.markTextModel.objectUri = selectedObj.objectUri
        this.getPropertyList(selectedObj.objectUri)
        this.getOwnedPropertyList(selectedObj.rowkey, selectedObj.objectUri)
      } else {
        this.propertyDisabled = false
        this.markTextModel.objectName = ''
        this.markTextModel.rowkey = ''
      }
    },
    // 文本标记
    handleMarkText() {
      let _postData = {
        docRowkey: this.rowkey,
        objectUri: this.markTextModel.objectUri,
        propertyList: [],
        rowkey: this.markTextModel.rowkey
      }
      if (this.isAddLabel) {
        if (this.markTextModel.objectUri == '') {
          this.$message.error('对象类型不能为空')
          return false
        }
        let representativePropertyList = this.representativePropertyList
        // 代表属性
        if (representativePropertyList.length > 0) {
          for (let i = 0; i < representativePropertyList.length; i++) {
            let element = representativePropertyList[i]
            if (element.propertyType === 'GisData') {
              if (
                util.verifyValue(
                  element.propertyType,
                  element.value,
                  element.displayname
                )
              ) {
                _postData.propertyList.push({
                  propertyUri: element.propertyUri,
                  propertyType: element.propertyType,
                  address: element.value.address,
                  longitude: element.value.longitude,
                  latitude: element.value.latitude,
                  label: true
                })
              } else {
                return false
              }
            } else if (element.propertyType === 'TimeInterval') {
              if (
                util.verifyValue(
                  element.propertyType,
                  element.value,
                  element.displayname
                )
              ) {
                _postData.propertyList.push({
                  propertyUri: element.propertyUri,
                  propertyType: element.propertyType,
                  timeStart: new Date(element.value.startTime).getTime(),
                  timeEnd: new Date(element.value.endTime).getTime(),
                  label: true
                })
              } else {
                return false
              }
            } else {
              if (
                util.verifyValue(
                  element.propertyType,
                  element.value,
                  element.displayname
                )
              ) {
                let value = element.value
                if (element.propertyType === 'DateTime') {
                  value = new Date(element.value).getTime()
                }
                _postData.propertyList.push({
                  propertyUri: element.propertyUri,
                  propertyType: element.propertyType,
                  value: value,
                  label: true
                })
              } else {
                return false
              }
            }
          }
        }
        postMarkTag(_postData).then(response => {
          this.$message.success('文本标记成功')
          this.handleCloseMarkTagDialog()
          this.listDocumentTagList.relations.push({
            displayName: this.markedText
          })
          this.txt = this.markedTag(this.cacheTxt, this.listDocumentTagList)
        })
      } else {
        if (this.current_Attr == '') {
          this.$message.error('请选择属性')
          return false
        }
        let params = {
          objectUri: this.markTextModel.objectUri,
          rowkey: this.markTextModel.rowkey,
          propertyList: []
        }
        let property = this.current_Attr
        if (property.propertyType === 'GisData') {
          if (
            util.verifyValue(
              property.propertyType,
              property.value,
              property.displayname
            )
          ) {
            params.propertyList.push({
              propertyUri: property.propertyUri,
              address: property.value.address,
              longitude: property.value.longitude,
              latitude: property.value.latitude,
              propertyType: property.isAddLabelpropertyType
            })
          } else {
            return false
          }
        } else if (property.propertyType === 'TimeInterval') {
          if (
            util.verifyValue(
              property.propertyType,
              property.value,
              property.displayname
            )
          ) {
            params.propertyList.push({
              propertyUri: property.propertyUri,
              propertyType: property.propertyType,
              timeStart: new Date(property.value.startTime).getTime(),
              timeEnd: new Date(property.value.endTime).getTime()
            })
          } else {
            return false
          }
        } else {
          if (
            util.verifyValue(
              property.propertyType,
              property.value,
              property.displayname
            )
          ) {
            let value = property.value
            if (property.propertyType === 'DateTime') {
              value = new Date(property.value).getTime()
            }
            params.propertyList.push({
              propertyUri: property.propertyUri,
              propertyType: property.propertyType,
              value: value
            })
          } else {
            return false
          }
        }
        if (property.readonly) {
          saveProperty(params).then(response => {
            this.$message.success('添加属性成功')
            this.handleCloseMarkTagDialog()
          })
        } else {
          updateProperty(params).then(response => {
            this.$message.success('修改属性成功')
            this.handleCloseMarkTagDialog()
          })
        }
      }
    },
    // 对象树点击事件
    handleNodeClick(data, node) {
      if (node.level === 1) {
        return false
      }
      this.markTextModel.objectName = data.displayname
      this.markTextModel.objectUri = data.uri
      this.getRepresentativePropertyList(data.uri)
      this.popoverVisible = false
    },
    propertyChange(uri) {
      this.alreadyOwnedPropertyList.forEach(item => {
        if (item.propertyUri === this.current_Attr.propertyUri) {
          this.current_Attr = item
          return false
        }
      })
    },
    // 关闭标注文本弹窗
    handleCloseMarkTagDialog() {
      this.input_error = false
      this.keyword = ''
      this.displayNameGroup[1].options = _.remove(
        this.displayNameGroup[1].options,
        item => {
          return this.current_selectd_account.rowkey === item.value
        }
      )
      this.current_selectd_account = ''
      this.dialogVisible = false
      this.propertyDisabled = false
      this.is_objectName_disable = false
      this.representativePropertyList = []
      this.propertyList = []
      this.alreadyOwnedPropertyList = []
      this.markTextModel.objectName = ''
      this.markTextModel.rowkey = ''
      this.markTextModel.objectUri = ''
      this.current_Attr = ''
    },
    // 标注文本里的对象
    markedTag(txt, listDocumentTag) {
      let currentUrl = window.location.href.split('#')[0]
      let txtArr = txt.split('')
      let { keywords, relations } = listDocumentTag
      // 匹配下滑
      relations.forEach(relation => {
        let tags = relation.displayName.split('-')
        txtArr.forEach((txt, index) => {
          tags.forEach(tag => {
            if (txt === tag[0]) {
              // 根据标签长度来截取大文本数组
              let matchTxt = txtArr.slice(index, index + tag.length).join('')
              if (matchTxt == tag) {
                let text =
                  `<a data-objecttype=${relation.objectType}` +
                  `  data-rowkey=${relation.rowkey}` +
                  `  data-objecturi=${relation.objectUri}` +
                  `  data-displayname=${relation.displayName}` +
                  `  data-name=${relation.name}` +
                  ` style='border-bottom:2px solid #5ea6eb;cursor:pointer;'`
                if (relation.rowkey) {
                  text += `onClick=window.open('${currentUrl}#/obj-show?objectType=${
                    relation.objectType
                  }&instanceUri=${relation.rowkey}&objectUri=${
                    relation.objectUri
                  }&displayName=${relation.displayName}&icon=${
                    relation.iconUrl
                  }&name=${relation.name}&belongGroup=${relation.belongGroup}')`
                }
                text += `>${matchTxt}</a>`
                txtArr.splice(index, tag.length, text)
              }
            }
          })
        })
      })
      // 匹配高亮
      keywords.forEach(keyword => {
        txtArr.forEach((txt, index) => {
          if (txt === keyword[0]) {
            // 根据标签长度来截取大文本数组
            let matchTxt = txtArr.slice(index, index + keyword.length).join('')
            if (matchTxt == keyword) {
              txt = `<span style='color:red')>${matchTxt}</span>`
              txtArr.splice(index, keyword.length, txt)
            }
          }
        })
      })
      return txtArr.join('')
    },
    // 加载对象树
    async loadTree() {
      let params = {
        groupList: ['socialaccount', 'keyfigures', 'focusgroup']
      }
      let data = await findAllWithBizGroupAsMap(params)
      data = data.map(item => {
        if (!item.hasOwnProperty('icon')) {
          item.icon = '../../static/tupian.png'
        }
        return item
      })
      this.groupTree = util.parseKeyData(data)
    },
    // 过滤属性
    handlefilterPropertyList(propertyList) {
      return propertyList.map(element => {
        if (element.propertyType === 'GisData') {
          element.value = { address: '', longitude: '', latitude: '' }
        } else if (element.propertyType === 'TimeInterval') {
          element.value = { startTime: '', endTime: '' }
        } else if (element.propertyType === 'DateTime') {
          element.value = ''
        } else {
          element.value = this.markedText
        }
        return element
      })
    },
    // 获取非代表属性
    async getPropertyList(uri) {
      this.propertyList = []
      let data = await findOperateProperties({ uri: uri })
      // 过滤属性获取非代表属性
      data = data.filter(
        item => item.allowed === '1' && item.representative === '0'
      )
      data = this.handlefilterPropertyList(data)
      this.propertyList = data.map(item => {
        item.readonly = true
        return item
      })
    },
    // 获取代表属性列表
    async getRepresentativePropertyList(uri) {
      this.representativePropertyList = []
      let data = await findOperateProperties({ uri: uri })
      // 过滤属性获取代表属性
      data = data.filter(
        item => item.allowed === '1' && item.representative === '1'
      )
      this.representativePropertyList = this.handlefilterPropertyList(data)
    },
    // 获取已添加的属性
    async getOwnedPropertyList(rowkey, uri) {
      this.alreadyOwnedPropertyList = []
      // 获取已添加的属性
      let data = await getAssociationAttr({ rowkey: rowkey, objectUri: uri })
      let propertyList = data.propertyList
      propertyList = this.handlefilterPropertyList(propertyList)
      propertyList = propertyList.map(item => {
        item.displayname = item.propertyName
        item.propertyValues.forEach(propertyVlaue => {
          if (propertyVlaue.dsrArray.includes(this.userName)) {
            item.readonly = false
          } else {
            item.readonly = true
          }
        })
        return item
      })
      this.alreadyOwnedPropertyList = propertyList
    },
    // 获取已标注的对象
    getListDocumentTag(rowkey, objectUri) {
      getListDocumentTag({ rowkey: rowkey, objecturi: objectUri }).then(
        response => {
          this.listDocumentTagList = response.data
          this.listDocumentTagList.relations.forEach(element => {
            element.label = element.showName
              ? element.showName
              : element.displayName
            element.value = element.rowkey
          })
          this.displayNameGroup[0].options = this.listDocumentTagList.relations
          if (this.listDocumentTagList.relations.length > 0) {
            this.handleChangeObjectName(
              this.listDocumentTagList.relations[0].rowkey
            )
          }
          this.txt = this.markedTag(this.cacheTxt, this.listDocumentTagList)
        }
      )
    },
    // 智能提取文档
    handleExtractDoc() {
      this.$refs.textMarkUp.handleExtractDoc()
    }
  }
}
</script>
<style lang="less" scoped>
#current-doc {
  .txt-content {
    max-height: 500px;
    overflow-y: auto;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 20px;
    border: 1px solid #eee;
    padding: 10px;
  }
  .markTextDialog {
    .object-container,
    .property-container {
      margin-top: 10px;
    }
    .property-container {
      min-height: 80px;
    }
  }
}
</style>
<style lang="less">
#current-doc {
  input[type='text']:read-only {
    background-color: #fff;
    /* border-color: #ddd; */
  }
  .custom-node-tree {
    height: 240px;
    overflow-y: auto;
  }
  .el-input-group__prepend {
    width: 40%;
  }
  .search-box {
    margin-bottom: 0px !important;
  }
  .search-result-container {
    width: 100%;
    position: absolute;
    background-color: #fff;
    z-index: 33;
    border: 1px solid #e0e0e0;
    padding: 5px 0 5px 5px;
    .search-result-box {
      padding: 5px 0 5px 10px;
      border-bottom: 1px solid #eee;
      display: flex;
      box-sizing: border-box;
      cursor: pointer;
      &:hover {
        background: #ecf5ff;
      }
      .search-result-item {
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .search-result-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .displayName {
          color: #08c;
        }
        span {
          line-height: 18px;
        }
      }
      .search-result-img {
        height: 36px;
      }
    }
    .page-container {
      margin-top: 16px;
      text-align: center;
    }
  }
}
</style>
